<template>
  <a-form-item :name="formNamePath" :label="formItem.label" :rules="[formItem.rule]" :extra="formItem.extra"
    :style="{ marginLeft: formItem.marginLeft + 'px' }" class="form-a-radio-group">
    <a-cascader :style="{ width: formItem.width ? formItem.width + 'px' : '' }"
      :options="formItem.type == 'cascaderArea' ? areaData : formItem.options" :placeholder="formItem.placeholder"
      :disabled="formItem.disabled" changeOnSelect v-model:value="formItem.value" :fieldNames="formItem.fieldNames || {
          children: 'children',
          label: 'areaName',
          value: 'areaCode',
        }
        " />
    <div class="help-msg" v-if="formItem.helpMsg">
      {{ formItem.helpMsg }}
    </div>
  </a-form-item>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted, nextTick } from "vue"
import { useColumnItem } from '@/components/draggable/hooks/useColumnModel';
import { dataSourceType } from "@/type.d";
import request from "@/api/index";
const emit = defineEmits(['parentValue'])
//props
const props = defineProps({
  formItem: {
    type: Object,
    default: {} as dataSourceType
  },
  formNamePath: []
})


const queryParam = ref({
  orgId: '',
  teamId: '',
})
const areaData = ref<any>([]);
const onChange = (value: any) => {
  formItem.value = value;
  // emit('parentValue', formItem.value)
};
const filter = (inputValue: any, path: any) => {
  return path.some((option: any) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
};
const displayRender = ({ labels, selectedOptions }: { labels: any; selectedOptions: any }) => {
};

const formItem: any = ref(props.formItem as any);
useColumnItem(computed(() => props.formItem), formItem);

// methods
//地区选择专用

const getAreaTree = () => {
  request.getAreaTree().then((res: dataSourceType[]) => {
    areaData.value = res;
  })
}
onMounted(() => {
  getAreaTree();
})

</script>

<style lang="less" scoped>
::v-deep(.ant-checkbox-group) {
  display: flex;
}

.help-msg {
  margin-top: 8px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
}
</style>